<template>
	<view class="content">
		<my-home class="home-float" v-if="floatData.open == 1" :floatData="floatData" :floatX="floatX" :floatY="floatY"
			:floatFrom="21"></my-home>
		<common-picker @confirm="handleConfirm"></common-picker>
		<view class="loading" v-if="loadingShow">
			<u-loading mode="circle" size="46"></u-loading><text class="loading-text">加载中...</text>
		</view>
		<!--list-->
		<!-- <view class="list">
			<view class="list-item" v-for="(item,i) in list" :key="i" >
				<view>{{item.time}}</view>

				<view :style="{color:'#0DA297'}"><text>充值 ¥</text><text class="money">{{item.money/100}}</text></view>
			</view>
		</view> -->
		<view class="list">
			<view class="list-item" v-for="(item,i) in list" :key="i" >
				<view class="list-item-top">
					<view class="list-item-top-left">兑换码：</view>
					<view class="list-item-top-right" ><text class="money">{{item.code}}</text></view>	
				</view>
				<view class="list-item-bottom">
					<view class="list-item-bottom-left">兑换时间：</view>
					<view class="list-item-bottom-right"><text class="list-item-bottom-time">{{item.create_time}}</text></view>
				</view>
				<view class="list-item-bottoms">
					<view class="list-item-bottom-lefts">兑换内容：</view>
					<view class="list-item-bottom-rights"><text  class="list-item-bottom-time">{{item.title}}</text></view>
				</view>
			</view>
							
				
		</view>
	
		<!--loadmore-->
		<view class="loadmore" v-if="loadmoreShow">
			<u-loadmore :status="loadmoreStatus" icon-type="flower" />
		</view>
		<!--no-data-->
		<no-data :src="noDataSrc" :txt="noDataTxt" v-if="list && list.length==0"></no-data>
		<uv-back :scroll="scrollTop"></uv-back>
		<view class="bottom-safe-area"></view>

		<common-drag />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//list
				pickerTime: '', //currently selected time
				list: '',
				page: 1, //当前页码，默认1
				pageSize: 20,
				total: 0, //总条数
				loadmoreStatus: 'loading', //上拉分页底部提示组件
				loadmoreShow: false,
				//no-data
				noDataSrc: this.$noData,
				noDataTxt: '暂无充值记录',
				//back to the top
				scrollTop: 0,
				floatData: {},
				floatX: 300,
				floatY: 80,
				clientHeight: null,
				//loading
				loadingShow: false,
			}
		},
		//back to the top
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getListRequest();
			this.getClineHeight();
		},

		onReachBottom() {
			if (this.loadmoreShow) {
				return false;
			}

			this.loadmoreShow = true;

			if (this.page < Math.ceil(this.total / this.pageSize)) {
				this.loadmoreStatus = 'loading';
				this.page++;
				this.getListRequest();
			} else {
				//no more
				this.loadmoreStatus = 'nomore';
				this.loadmoreShow = true;
			}
		},
		methods: {
			getBarHeight() {
				const res = uni.getSystemInfoSync()
				if (res.platform === 'ios') {
					return 44 + res.statusBarHeight
				} else if (res.platform === 'android') {
					return 48 + res.statusBarHeight
				} else {
					return 0;
				}
			},
			//获取可视区域高度
			getClineHeight() {
				const res = uni.getSystemInfo({
					success: (res => {
						this.clientHeight = res.windowHeight - uni.upx2px(80) - this.getBarHeight();
						this.floatY = this.clientHeight - 50;
					})
				});
			},
			_reset() {
				this.page = 1; //reset页码
				this.loadmoreShow = false;
				this.loadmoreStatus = 'loading';
				this.total = 0;
				this.list = '';
			},
			handleConfirm(param) {
				this._reset();
				this.pickerTime = param.date;
				this.getListRequest();
			},
			getListRequest() {
				this.loadingShow = true;
				const arr = this.page == 1 ? [] : this.list;
				//getRechargeRecord
				this.$u.api.exchangeList({

					time: this.pickerTime,
					page_index: this.page,
				}).then(res => {
					this.loadingShow = false;
					this.floatData = res.window;
					if (res.result == 'success') {
						const list = [...arr, ...res.list];
						this.list = list;
						this.total = res.total;
					} else {
						this.$utils.modal({
							content: res.msg,
							showCancel: false,
							callback: (bool) => {

							}
						});
					};
					this.loadmoreShow = false;
				}).catch(() => {
					this.loadmoreShow = false;
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 100rpx;
	}

	.home-float {
		position: fixed;
		z-index: 99;
		bottom: 100rpx;
		right: 50rpx;
	}

	.loading {
		position: fixed;
		top: 48%;
		left: 48%;
	}

	.loading-text {
		margin-left: 5rpx;
	}
.list-item{
		overflow: hidden;
		margin:15rpx auto;
		width: 90%;
		background: #FFFFFF;
		opacity: 1;
		border-radius:15rpx ;
		border-bottom:2rpx solid #e5e5e5;
	}
	.list-item>view:nth-child(1){
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}
	.list-item>view:nth-child(2){
		font-size: 30rpx;
		font-weight: 500;
	}
	.list .money{
		font-size: 30rpx;
		padding-left: 10rpx;
	}
	.list-item:last-child{
		border-bottom: none;
	}
	.loadmore{
		padding:30rpx 0;
	}
	.list-item-top {
		display: flex;
		justify-content: space-between;
		align-items: center; 
	}
	.list-item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center; 
	}
	.list-item-bottoms{
		display: flex;
	}
	.list-item-top-left {
		margin: 32rpx 0 0 28rpx;
		font-size: 30rpx;
	    color: #0DA297;
	}
	.list-item-top-right {
		margin: 26rpx 32rpx 0 0;
	}
	.list-item-top-right .money {
		font-size: 44rpx;
		color: #0DA297;
	} 
	.list-item-bottom-left {
		margin: 8rpx 0 10rpx 28rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
	.list-item-bottom-lefts {
		width: 150rpx;
		margin: 8rpx 0 30rpx 28rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
	.list-item-bottom-rights {
		text-align: right;
		flex: 1;
		margin: 8rpx 28rpx  28rpx 0;
	}
	.list-item-bottom-right {
		margin: 8rpx 28rpx  28rpx 0;
	}
	.list-item-bottom-recharge {
		font-size: 28rpx;
		font-weight: 500;
		color: #FF6B00;
	}
	.list-item-bottom-time {
		margin-left: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}
	
</style>
<style>
	page {
		background: #F9F9F9;
	}
</style>